<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 学习background属性 </title>
</head>

<body>
  <main class="main">
    <div class="background-box">
      1 background-color: 指定填充背景的颜色
    </div>

    <div class="background-box">
      2 background-image: 引用图片作为背景。
    </div>

    <div class="background-box">
      3 background-position: 指定元素背景图片的位置。
    </div>

    <div class="background-box">
      4 background-repeat: 决定是否重复背景图片。
    </div>




    <div class="background-box">
      5 background-attachment: 决定背景图是否随页面滚
    </div>





    <div class="background-box">
      6 background-clip 能够控制背景显示的位置

    </div>

    <div class="background-box">
     7 background-origin 此属性需要与background-position配合使用。
      你可以用background-position计算定位是从border，padding或content
      boxes内容区域算起。（类似background-clip）

    </div>

    <div class="background-box">
     8 background-color: 指定填充背景的颜色
    </div>

    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>
    <div> </div>



  </main>
</body>

</html>